import { StyleSheet, Text, TouchableHighlight, View, Image } from 'react-native'
import React from 'react'
import Swiper from 'react-native-swiper'
import { Navigation } from 'react-native-navigation'
import { LoginRoot } from '../navigation'

const MySwiper = (props) => {
  let arr = props.images
  // 立即体验
  const experience = () => {
    // 跳转到登录页面
    Navigation.setRoot(LoginRoot)
  }
  return (
    <View style={styles.MySwiperCount}>
      <Swiper style={styles.wrapper} loop={false}>
        {arr.map(item => {
          return (
            <View key={item.id} style={styles.swiperItem}>
              <View>
                <Image source={item.img} style={styles.swiperImg} />
              </View>
              {item.id == 4 && (
                <TouchableHighlight
                  style={styles.swiperImgBtn}
                  underlayColor='#f27600'
                  activeOpacity={0.6}
                  onPress={experience} >
                  <View>
                    <Text>立即体验</Text>
                  </View>
                </TouchableHighlight>
              )}
            </View>
          )
        })}
      </Swiper>
    </View>
  )
}

export default MySwiper

const styles = StyleSheet.create({
  MySwiperCount: {
    flex: 1
  },
  wrapper: {

  },
  swiperItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  swiperImg: {
    width: 200,
    height: 200
  },
  swiperImgBtn: {
    marginTop: 20,
    width: 160,
    height: 50,
    borderRadius: 10,
    backgroundColor: '#eee',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  }

})